<template>
  <div class="alarm-content">
    <item-wrap title="报警信息详情" box-name="dv-border-box10" class="alarm-box">
      <scroll-seamless :list="list">
        <div class="content-item" v-for="(item, index) in list" :key="index">
          <span class="order-num-20">{{ index + 1 }}</span>
          <div class="item-inner">
            <el-row>
              <el-col :span="6">
                <span class="labels-15">设备：</span>
                <span class="info-20"> {{ item.deviceName }}</span>
              </el-col>
              <el-col :span="6">
                <span class="labels-15">时间：</span>
                <span class="info-20"> {{ item.createTime }}</span>
              </el-col>
              <el-col :span="6">
                <span class="labels-15">告警值：</span>
                <span class="warning-20"> {{ item.alarmValue || '0.0' }}</span>
              </el-col>
              <el-col :span="6">
                <span class="labels-15">报警事件：</span>
                <span class="info-20"> {{ item.title }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="labels-15"> 告警状态：</span>
                <span :class="{ 'warning-20': item.handleStatus === '0' , 'info-20': item.handleStatus === '1'}">
                  {{ item.handleStatus === '0' ? '未处理':'已处理' }}
                </span>
              </el-col>
              <el-col :span="18">
                <span class="labels-15">报警内容：</span>
                <span class="info-20"> {{ item.content || '无' }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </scroll-seamless>
    </item-wrap>
  </div>
</template>

<script setup lang="ts">
import { GET } from '@/api'
import useSettingStore from "@/stores/setting";

const list = ref<Alarm[]>([])
let timer:number

onMounted(()=>{
  getData()
  nextTick(()=>{
    swiper()
  })
})

onBeforeUnmount(()=>{
  clearData()
})

function numsFilter(msg){
  return msg || 0;
}
function getData() {
  GET("policeData",{}).then((res) => {
    list.value = res.data
  })
}

function clearData() {
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}

function swiper() {
  if (timer) {
    return
  }
  let looper = () => {
    getData()
  }
  timer = setInterval(looper, useSettingStore().listAutoTime);
}
</script>

<style scoped lang="scss">
.alarm-content {
  margin-top: 20px;
  min-height: calc(100% - 60px);
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  .alarm-box {
    height: 960px;
    width: 1500px;
  }
}
</style>